<template>
  <div>
    <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
    >
       全选
    </el-checkbox>
    <el-checkbox-group
        v-model="checkedDivisions"
        @change="handleCheckedCitiesChange"
    >
        <el-checkbox v-for="division in divisions" :key="division.id" :label="division.administrationName" :value="division">
        {{ division.administrationName }}
        </el-checkbox>
  </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref,watch} from 'vue'
import apiMod from '@/apiMod/index'

let emits = defineEmits(['getDivisions'])
let infoArea = inject("infoArea")
let props = defineProps({
    defaultVal:{
        type:Object,
        default:()=>({})
    }
})

const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedDivisions:any = ref([])
const divisions = ref([])

const handleCheckAllChange = (val: boolean) => {
    console.log('-=-',val,divisions.value)
  checkedDivisions.value = val ? divisions.value : []
  isIndeterminate.value = false
  emits('getDivisions',checkedDivisions.value)
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === divisions.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < divisions.value.length
  emits('getDivisions',checkedDivisions.value)
}
// 获取区域信息
const getAreaInfo = async() =>{
    let params = {
        // isNotShowProvince:true,
        administrationId:11
    }
   let res = await apiMod.sysadministration_getTree(params)
   if(res.code==0){
        divisions.value = res.data[0].children[0].children
   }
}
getAreaInfo()
watch(()=>props.defaultVal,(val)=>{
    if(val){
        checkedDivisions.value = val
        handleCheckedCitiesChange(checkedDivisions.value)
    }
})
</script>
<style scoped lang="scss">
</style>